<template>
  <el-dialog title="订单详情" v-if="dialogVisible" :visible.sync="dialogVisible" :before-close="handleClose">
    {{ orderDetail }}
    <description-item :title="orderDetail.taskTitle" :itemDetail="descriptionItems"></description-item>
  </el-dialog>
</template>

<script>
import DescriptionItem from './components/DescriptionItem.vue';

export default {
  name: "OrderDialog",
  components: { DescriptionItem },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    orderDetail: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      descriptionItems: []
    }
  },
  watch: {
    dialogVisible(newVal) {
      if (newVal) {
        console.log('dialogVisible changed:', newVal); // 确认触发
        this.mapDataToDescriptionItems();
      }
    },
    orderDetail: {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (this.dialogVisible) {
          console.log('orderDetail updated:', newVal); // 确认 orderDetail 更新
          this.mapDataToDescriptionItems();
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('close', false);
    },
    // 将订单状态映射为中文描述
    mapOrderStatus(status) {
      switch (status) {
        case 1: return "待支付";
        case 2: return "待接单";
        case 3: return "待完成";
        case 4: return "已完成";
        case 5: return "已取消";
        default: return "未知状态";
      }
    },
    // 将是否加急映射为中文描述
    mapUrgency(isUrgent) {
      return isUrgent === 0 ? "加急" : "不加急";
    },
    // 将服务类型映射为中文描述
    mapServiceType(type) {
      return type === 1 ? "接" : type === 2 ? "送" : "未知类型";
    },
    // 根据订单状态设置额外描述项
    mapDataToStatus(data) {
      let additionalItems = []; // 用来存储额外的描述项
      switch (data.status) {
        case 1:
          additionalItems = [
            { label: "支付金额", value: data.payAmount },
            { label: "优惠金额", value: data.discountAmount || '无' }
          ];
          break;
        case 2:
          additionalItems = [
            { label: "支付金额", value: data.payAmount },
            { label: "优惠金额", value: data.discountAmount || '无' }
          ];
          break;
        case 3:
          additionalItems = [
            { label: "支付金额", value: data.payAmount },
            { label: "优惠金额", value: data.discountAmount || '无' },
            { label: "接单人id", value: data.helperId }
          ];
          break;
        case 4:
          additionalItems = [
            { label: "支付金额", value: data.payAmount },
            { label: "优惠金额", value: data.discountAmount || '无' },
            { label: "接单人id", value: data.helperId },
            { label: "完成时间", value: data.completionDate },
            { label: "服务时长", value: data.serviceDuration },
            { label: "完成图片", value: data.completeUrl }
          ];
          break;
        default:
          additionalItems = [
            { label: "支付金额", value: data.payAmount },
            { label: "优惠金额", value: data.discountAmount || '无' },
            { label: "取消时间", value: data.cancelTime }
          ];
          break;
      }
      this.descriptionItems.push(...additionalItems);
    },
    // 将订单详情映射为描述项
    mapDataToDescriptionItems() {
      const data = this.orderDetail;
      console.log('orderDetail in mapDataToDescriptionItems:', data); // 检查 orderDetail 内容
      if (!data || data.taskCategoryId === undefined) {
        console.warn('taskCategoryId is missing in orderDetail');
        return;
      }

      this.descriptionItems = [
        { label: "订单号", value: data.taskNo },
        { label: "用户名称", value: data.userName },
        { label: "电话", value: data.phone },
        { label: "区域编码", value: data.regionCode },
        { label: "地址", value: data.addressId },
        { label: "描述", value: data.taskDescription },
        { label: "下单id", value: data.requesterId },
        { label: "订单状态", value: this.mapOrderStatus(data.status) },
        { label: "金额", value: data.reward },
      ];

      this.mapDataToStatus(data);

      // 检查 taskCategoryId 并添加特定服务类型的描述项
      let additionalItems = [];
      switch (data.taskCategoryId) {
        case "2":  // 快递服务
          additionalItems = [
            { label: "驿站名称", value: data.stationName },
            { label: "取件码", value: data.pickupCode },
            { label: "物品重量", value: data.itemWeight },
          ];
          break;
        case "3":  // 宠物服务
          additionalItems = [
            { label: "是否加急", value: this.mapUrgency(data.isUrgent) },
            { label: "宠物类型", value: data.dogType },
            { label: "是否遛狗", value: data.isWalkDog },
            { label: "是否视频喂养", value: data.isVideoFeeding },
          ];
          break;
        case "4":  // 游戏开黑
          additionalItems = [
            { label: "性别", value: data.gender },
          ];
          break;
        case "5":  // 代扔垃圾
          additionalItems = [
            { label: "垃圾大小", value: data.garbageSize },
            { label: "垃圾数量", value: data.count },
            { label: "垃圾图片", value: data.picture || '无' },
          ];
          break;
        case "6":  // 商品代买
          additionalItems = [
            { label: "支付码", value: data.payQr || '无' },
          ];
          break;
        case "8": // 地铁接送
          additionalItems = [
            { label: "服务类型", value: this.mapServiceType(data.receiveType) },
            { label: "地铁口", value: data.metro },
          ];
          break;
        default:  // 帮晒被子、邻里互助
          break;
      }

      this.descriptionItems.push(...additionalItems);
    }
  },
}
</script>

<style lang="scss" scoped></style>
